<template>
  <div id="app">
    <div class="screen-container">
      <!-- 头部标题 -->
      <header class="header">
        <h1>金泉路警网融合社会治理e站数据中心</h1>
      </header>
      
      <!-- 导航栏 -->
      <nav class="nav-bar">
        <div class="nav-item" :class="{ active: currentPage === 'team' }" @click="switchPage('team')">
          <i class="el-icon-user"></i>
          <span>专业化队伍建设</span>
        </div>
        <div class="nav-item" :class="{ active: currentPage === 'dispute' }" @click="switchPage('dispute')">
          <i class="el-icon-warning"></i>
          <span>矛盾纠纷化解排查</span>
        </div>
        <div class="nav-item" :class="{ active: currentPage === 'data' }" @click="switchPage('data')">
          <i class="el-icon-data-analysis"></i>
          <span>案事件大数据</span>
        </div>
        <div class="nav-item" :class="{ active: currentPage === 'personnel' }" @click="switchPage('personnel')">
          <i class="el-icon-bell"></i>
          <span>关注人员管控</span>
        </div>
        <div class="nav-item" :class="{ active: currentPage === 'stoolMeeting' }" @click="switchPage('stoolMeeting')">
          <i class="el-icon-service"></i>
          <span>小板凳议事会</span>
        </div>
        <div class="nav-item" :class="{ active: currentPage === 'legalPromotion' }" @click="switchPage('legalPromotion')">
          <i class="el-icon-coordinate"></i>
          <span>道德法制宣防</span>
        </div>
      </nav>
      
      <!-- 主要内容区 -->
      <div class="main-content">
        <template v-if="currentPage === 'team'">
          <!-- 左侧数据面板 -->
          <div class="left-panel panel">
            <professional-team></professional-team>
          </div>
          
          <!-- 中间地图区域 -->
          <div class="center-map panel">
            <data-map></data-map>
            <incident-chart class="incident-chart"></incident-chart>
          </div>
          
          <!-- 右侧数据面板 -->
          <div class="right-panel panel">
            <data-statistics></data-statistics>
          </div>
        </template>
        
        <template v-else-if="currentPage === 'dispute'">
          <dispute-resolution></dispute-resolution>
        </template>
        
        <template v-else-if="currentPage === 'data'">
         
            <case-event-data></case-event-data>
         
        </template>

        <template v-else-if="currentPage === 'personnel'">
         
         <personnel-control></personnel-control>
      
     </template>

     <template v-else-if="currentPage === 'stoolMeeting'">
      <stool-meeting></stool-meeting>
     </template>

     <template v-else-if="currentPage === 'legalPromotion'">
      <legal-promotion></legal-promotion>
     </template>
      </div>
    </div>
  </div>
</template>

<script>
import ProfessionalTeam from './components/ProfessionalTeam.vue'
import DataMap from './components/DataMap.vue'
import DataStatistics from './components/DataStatistics.vue'
import IncidentChart from './components/IncidentChart.vue'
import DisputeResolution from './components/DisputeResolution.vue'
import CaseEventData from './components/CaseEventData.vue'
import PersonnelControl from './components/PersonnelControl.vue'
import StoolMeeting from './components/StoolMeeting.vue'
import LegalPromotion from './components/LegalPromotion.vue'
export default {
  name: 'App',
  components: {
    ProfessionalTeam,
    DataMap,
    DataStatistics,
    IncidentChart,
    DisputeResolution,
    CaseEventData,
    PersonnelControl,
    StoolMeeting,
    LegalPromotion
  },
  data() {
    return {
      currentPage: 'team'
    }
  },
  methods: {
    switchPage(page) {
      this.currentPage = page
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
  background: #001529;
  overflow: hidden;
}

#app {
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
}

.screen-container {
  width: 100vw;
  height: 100vh;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.header {
  text-align: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 32px;
  color: #00c6ff;
  text-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
  margin: 0;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  background: rgba(0, 24, 48, 0.8);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 20px;
}

.nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  color: #7eb9ff;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 4px;
  min-width: 120px;
}

.nav-item:hover {
  background: rgba(0, 198, 255, 0.1);
  color: #00c6ff;
}

.nav-item.active {
  background: rgba(0, 198, 255, 0.2);
  color: #00c6ff;
  position: relative;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: #00c6ff;
  box-shadow: 0 0 10px rgba(0, 198, 255, 0.5);
}

.nav-item i {
  font-size: 20px;
}

.nav-item span {
  margin-left: 8px;
  font-size: 14px;
}

.main-content {
  flex: 1;
  display: flex;
  gap: 20px;
  min-height: 0;
}

.panel {
  background: rgba(0, 24, 48, 0.8);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
  box-sizing: border-box;
}

.left-panel, .right-panel {
  width: 25%;
  overflow-y: auto;
  padding: 15px;
}

.center-map {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 15px;
  background: rgba(0, 24, 48, 0.8);
  border: 1px solid rgba(0, 198, 255, 0.3);
  border-radius: 4px;
}

.incident-chart {
  margin-top: 0;
}
</style> 